<template>
<div class="app-container">
	<div class="detail-container clearfix">
	<div class="d-content">
		<div class="d-info" id="d-info" v-if='allData.guaranteeSlipBaseBase != null'>
			<p class="firstp"><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-info'}"></i>&nbsp;&nbsp;&nbsp;保单信息
				<el-button size="mini" class='btn' @click='toEdit()'>编辑</el-button>
			</p>
			<div class="info-box">
				<p>保单号：<span> {{allData.guaranteeSlipBaseBase.guaranteeSlipNumber}}</span>&nbsp;&nbsp;
					<span v-if='allData.guaranteeSlipBaseBase.guaranteeSlipType==1'>商业险</span>
					<span v-if='allData.guaranteeSlipBaseBase.guaranteeSlipType==2'>交强险</span>
				</p>
				<ul>
					<li>
						<div class="lf">
							<span>保险公司工号：</span>
							<span> {{allData.guaranteeSlipBaseBase.staffAccount}}</span>
						</div>
						<div class="md">
							<span>签单日期：</span>
							<span>{{allData.guaranteeSlipBaseBase.signDate}}</span>
						</div>
						<div class="rh">
							<span>业务类型：</span>
							<span>{{allData.guaranteeSlipBaseBase.businessType}}</span>
						</div>
					</li>
					<li>
						<div class="lf">
							<span>业务员：</span>
							<span>{{allData.guaranteeSlipBaseBase.name}}</span>
						</div>
						<div class="md">
							<span>核保日期：</span>
							<span>{{allData.guaranteeSlipBaseBase.confirmDate}}</span>
						</div>
						<div class="rh">
							<span>录单模式：</span>
							<span>{{allData.guaranteeSlipBaseBase.entryType}}</span>
						</div>
					</li>
					<li>
						<div class="lf">
							<span>投保单号：</span>
							<span>{{allData.guaranteeSlipBaseBase.guaranteeSlipSingleNumber}}</span>
						</div>
						<div class="md">
							<span>支付日期：</span>
							<span>{{allData.guaranteeSlipBaseBase.paymentDate}}</span>
						</div>
						<div class="rh">
							<span>交商同保：</span>
							<span>{{allData.guaranteeSlipBaseBase.mutualInsurance}}</span>
						</div>
					</li>
					<li>
						<div class="lf">
							<span>保单印刷号：</span>
							<span>{{allData.guaranteeSlipBaseBase.guaranteeSlipPrintingNumber}}</span>
						</div>
						<div class="md">
							<span>起保日期：</span>
							<span>{{allData.guaranteeSlipBaseBase.beginDate}}</span>
						</div>
						<div class="rh">
							<span>上年出险次数：</span>
							<span>{{allData.guaranteeSlipBaseBase.dangerTimes}}</span>
						</div>
					</li>
					<li>
						<div class="lf">
							<span>总保费：</span>
							<span>￥{{allData.guaranteeSlipBaseBase.totalPremium}}</span>
						</div>
						<div class="md">
							<span>到期日期：</span>
							<span>{{allData.guaranteeSlipBaseBase.expirationDate}}</span>
						</div>
						<div class="rh">
							<span>上年违章次数：</span>
							<span>{{allData.guaranteeSlipBaseBase.peccancyTimes}}</span>
						</div>
					</li>
					<li>
						<div class="lf">
							<span>总标准保费：</span>
							<span>￥{{allData.guaranteeSlipBaseBase.totalStandardPremium}}</span>
						</div>
						<div class="md">
							<span>登记系统日期：</span>
							<span>{{allData.guaranteeSlipBaseBase.creationTime}}</span>
						</div>
						<div class="rh">
							<span class="sp">渠道名称：</span>
							<span>{{allData.guaranteeSlipBaseBase.channelName}}</span>
						</div>
					</li>
					<li>
						<div class="lf">
							<span>总净保费：</span>
							<span>￥{{allData.guaranteeSlipBaseBase.totalNetPremium}}</span>
						</div>
						<div class="md">
							<span>单证打印日期：</span>
							<span>{{allData.guaranteeSlipBaseBase.documentPrintingDate}}</span>
						</div>
						<div class="rh">
							<span>渠道代码：</span>
							<span>{{allData.guaranteeSlipBaseBase.channelCode}}</span>
						</div>
					</li>
					<li>
						<div class="lf">
							<span>总税额：</span>
							<span>￥{{allData.guaranteeSlipBaseBase.totalTaxAmount}}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- dialog -->
		<el-dialog title="保单信息编辑" :visible.sync="dialogFormVisible" width='700px'>
		  <el-form :model="formLabel" :inline='true' ref='formLabel'>
		    <el-form-item label="交商同保" class='setStyle'>
		      <el-select v-model="formLabel.mutualInsurance" placeholder="请选择" size='mini'>
			    <el-option
			      v-for="item in mutualInsurances"
			      :key="item.key"
			      :label="item.value"
			      :value="item.key">
			    </el-option>
			  </el-select>
		    </el-form-item>
		    <el-form-item label="业务员" class='setStyle'>
		      <el-select v-model="formLabel.name" placeholder="请选择" size='mini'>
			    <el-option
			      v-for="item in names"
			      :key="item.id"
			      :label="item.userName"
			      :value="item.id">
			    </el-option>
			  </el-select>
		    </el-form-item>
		    <el-form-item label='备注类型' class='setStyle'>
		    <template>
			  <el-radio v-model="formLabel.remarkType" label="1">公有</el-radio>
			  <el-radio v-model="formLabel.remarkType" label="2">私有</el-radio>
			</template>
			</el-form-item>
		    <el-form-item label="备注" label-width="63px" class='setStyle'>
		    <div style='width:300px'>
		      <el-input type="textarea" v-model="formLabel.remark" rows='3'></el-input>
		    </div>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer setCenter">
		    <el-button type="primary" @click="toUpdate('formLabel')" size="mini">确 定</el-button>
		  </div>
		</el-dialog>
		<div class="d-carInfo" id="d-carInfo" v-if='allData.guaranteeSlipVehicle != null'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-carInfo'}"></i>&nbsp;&nbsp;&nbsp;车辆信息</p>
			<div class="info-box">
				<p>车牌号：&nbsp;&nbsp;<span v-if="allData.guaranteeSlipVehicle.plateNumber != null">{{allData.guaranteeSlipVehicle.plateNumber}}</span></p>
				<ul>
					<li>
						<span>车辆种类：</span>
						<span>{{allData.guaranteeSlipVehicle.vehicleType}}</span>
					</li>
					<li>
						<span>采购价：</span>
						<span>￥{{allData.guaranteeSlipVehicle.purchasePrice}}</span>
					</li>
					<li>
						<span>厂牌型号：</span>
						<span>{{allData.guaranteeSlipVehicle.plateColor}}</span>
					</li>
					<li>
						<span>号牌底色：</span>
						<span>{{allData.guaranteeSlipVehicle.plateNumber}}</span>
					</li>
					<li>
						<span>核载质量：</span>
						<span v-if="allData.guaranteeSlipVehicle.loadQuality != null">{{allData.guaranteeSlipVehicle.loadQuality}}千克</span>
					</li>
					<li>
						<span>是否过户车：</span>
						<span>{{allData.guaranteeSlipVehicle.isTransfer}}</span>
					</li>
					<li>
						<span>车架号：</span>
						<span>{{allData.guaranteeSlipVehicle.frameNumber}}</span>
					</li>
					<li>
						<span>整备质量：</span>
						<span v-if="allData.guaranteeSlipVehicle.curbQuality != null">{{allData.guaranteeSlipVehicle.curbQuality}}千克</span>
					</li>
					<li>
						<span>所属性质：</span>
						<span>{{allData.guaranteeSlipVehicle.belongNature}}</span>
					</li>
					<li>
						<span>发动机号：</span>
						<span>{{allData.guaranteeSlipVehicle.engineNumber}}</span>
					</li>
					<li>
						<span>功率：</span>
						<span v-if="allData.guaranteeSlipVehicle.power != null">{{allData.guaranteeSlipVehicle.power}}KW</span>
					</li>
					<li>
						<span>使用属性：</span>
						<span>{{allData.guaranteeSlipVehicle.useNature}}</span>
					</li>
					<li>
						<span>座位：</span>
						<span>{{allData.guaranteeSlipVehicle.seatCount}}</span>
					</li>
					<li>
						<span>排量：</span>
						<span v-if="allData.guaranteeSlipVehicle.displacement != null">{{allData.guaranteeSlipVehicle.displacement}}升</span>
					</li>
					<li>
						<span>初登日期：</span>
						<span>{{allData.guaranteeSlipVehicle.initialDate}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="d-party" id="d-party" v-if='allData.relations.length != 0'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-party'}"></i>&nbsp;&nbsp;&nbsp;保单关系人</p>
			<div class="info-box" v-for='item in allData.relations'>
				<p><i class="iconfont icon-jiaose"></i>&nbsp;&nbsp;&nbsp;&nbsp;客户角色：
					<span v-if='item.customerRole == 0'>&nbsp;&nbsp;未知</span>
					<span v-if='item.customerRole == 1'>&nbsp;&nbsp;被保人</span>
					<span v-if='item.customerRole == 2'>&nbsp;&nbsp;投保人</span>
					<span v-if='item.customerRole == 3'>&nbsp;&nbsp;车主</span>
				</p>
				<ul>
					<li>
						<span>客户姓名：</span>
						<span>{{item.customerName}}</span>
					</li>
					<li>
						<span>性别：</span>
						<span v-if='item.gender == 1'>男</span>
						<span v-if='item.gender == 2'>女</span>
					</li>
					<li>
						<span>手机号：</span>
						<span>{{item.customerPhone}}</span>
					</li>
					<li>
						<span>证件号：</span>
						<span>{{item.identificationNumber}}</span>
					</li>
					<li>
						<span>证件类型：</span>
						<span>{{item.certificateType}}</span>
					</li>
					<li>
						<span>座机号：</span>
						<span>{{item.telphone}}</span>
					</li>
					<li>
						<span>客户类型：</span>
						<span v-if='item.customerType == 0'>个人客户</span>
						<span v-if='item.customerType == 1'>集体客户</span>
					</li>
					<li>
						<span>地址：</span>
						<span>{{item.address}}</span>
					</li>	
				</ul>
			</div>
		</div>
		<div class="d-detail" id='d-detail' v-if='allData.details.length != 0'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-detail'}"></i>&nbsp;&nbsp;&nbsp;保单明细</p>
			<div class="info-box">
				<p>不计免赔险</p>
				<div class="util-table">
					<table class="util-tb">
						<tr>
							<th>项目</th>
							<th>保额</th>
							<th>保单保费</th>
							<th>折扣</th>
						</tr>
						<tr v-for='item in allData.details'>
							<td class="util-tab">{{item.item}}</td>
							<td class="util-tab">￥{{item.coverage}}</td>
							<td class="util-tab">￥{{item.premium}}</td>
							<td class="util-tab">{{item.discount}}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="d-fee" id='d-fee' v-if='allData.guaranteeSlipCharge != null'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-fee'}"></i>&nbsp;&nbsp;&nbsp;手续费信息</p>
			<div class="info-box">
				<div class="util-table">
					<table class="util-tb">
						<tr>
							<th>名称</th>
							<th>比例</th>
							<th>金额</th>
						</tr>
						<tr>
							<td class="util-tab">保险公司保单手续费</td>
							<td class="util-tab">{{allData.guaranteeSlipCharge.companyChargeRatio}}</td>
							<td class="util-tab">￥{{allData.guaranteeSlipCharge.companyCharge}}</td>
						</tr>
						<tr>
							<td class="util-tab">保险公司车船税手续费</td>
							<td class="util-tab">{{allData.guaranteeSlipCharge.companyVehicleAndVesselTaxRatio}}</td>
							<td class="util-tab">￥{{allData.guaranteeSlipCharge.companyVehicleAndVesselTax}}</td>
						</tr>
						<tr>
							<td class="util-tab">保险公司附加奖励</td>
							<td class="util-tab">{{allData.guaranteeSlipCharge.companyAdditionalRewardRatio}}</td>
							<td class="util-tab">￥{{allData.guaranteeSlipCharge.companyAdditionalReward}}</td>
						</tr>
						<tr>
							<td class="util-tab">业务员保单手续费</td>
							<td class="util-tab">{{allData.guaranteeSlipCharge.salesManChargeRatio}}</td>
							<td class="util-tab">￥{{allData.guaranteeSlipCharge.salesManChargeRatio}}</td>
						</tr>
						<tr>
							<td class="util-tab">业务员车船税手续费</td>
							<td class="util-tab">{{allData.guaranteeSlipCharge.salesManVehicleAndVesselTaxRatio}}</td>
							<td class="util-tab">￥{{allData.guaranteeSlipCharge.salesManVehicleAndVesselTax}}</td>
						</tr>
						<tr>
							<td class="util-tab">业务员附加奖励</td>
							<td class="util-tab">{{allData.guaranteeSlipCharge.salesManAdditionalRewardRatio}}</td>
							<td class="util-tab">￥{{allData.guaranteeSlipCharge.salesManAdditionalReward}}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="d-account" id='d-account'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-account'}"></i>&nbsp;&nbsp;&nbsp;结算信息</p>
			<div class="info-box">
				<ul>
					<li>
						<span>保险公司实结保单手续费</span>
						<span>34%</span>
					</li>
					<li>
						<span>业务员实结保单手续费</span>
						<span>34%</span>
					</li>
					<li>
						<span>保险公司实结车船税手续费</span>
						<span>34%</span>
					</li>
					<li>
						<span>业务员实结车船税手续费</span>
						<span>34%</span>
					</li>
					<li>
						<span>保险公司实结附加奖励</span>
						<span>34%</span>
					</li>
					<li>
						<span>业务员实结附加奖励</span>
						<span>34%</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="d-match" id='d-match' v-if='allData.policys.length != 0'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-match'}"></i>&nbsp;&nbsp;&nbsp;匹配政策</p>
			<div class="info-box" v-for='item in allData.policys'>
				<p>政策类型：
					<span v-if='item.policyType == 0'>基础政策</span>
					<span v-if='item.policyType == 1'>附加政策</span>
					&nbsp;&nbsp;
					<span v-if='item.policeState==0'>编辑中</span>
					<span v-if='item.policeState==1'>待审批</span>
					<span v-if='item.policeState==2'>等待生效</span>
					<span v-if='item.policeState==3'>生效中</span>
					<span v-if='item.policeState==4'>已过期</span>
					<span v-if='item.policeState==5'>已驳回</span>
				</p>
				<ul>
					<li>
						<span>工号：</span>
						<span>{{item.staffs}}</span>
					</li>
					<li>
						<span>批次名称：</span>
						<span>{{item.batchName}}</span>
					</li>
					<li>
						<span>政策有效期：</span>
						<span>{{item.effectiveDate}}到{{item.expiryDate}}</span>
					</li>
					<li>
						<span>出单类型/险种：</span>
						<span>{{item.staffs}}111</span>
					</li>
					<li>
						<span>车辆种类：</span>
						<span>{{allData.guaranteeSlipVehicle.vehicleType}}</span>
					</li>
					<li>
						<span>实用性质：</span>
						<span>{{allData.guaranteeSlipVehicle.belongNature}}</span>
					</li>
					<li>
						<span>备注：</span>
						<span>{{item.remarks}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="d-pay" id="d-pay" v-if='allData.guaranteeSlipPayment != null'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-pay'}"></i>&nbsp;&nbsp;&nbsp;付款信息</p>
			<div class="info-box">
				<p>下游佣金收款人：<span>{{allData.guaranteeSlipPayment.payeeOrDraweeName}}</span></p>
				<ul>
					<li>
						<span>收款金额：</span>
						<span v-if='allData.guaranteeSlipPayment.receivables != null'>{{allData.guaranteeSlipPayment.receivables}}元</span>
					</li>
					<li>
						<span>出单类型：</span>
						<span v-if='allData.guaranteeSlipPayment.issueType==1'>全费出单</span>
						<span v-if='allData.guaranteeSlipPayment.issueType==2'>净费出单</span>
					</li>
					<li>
						<span>付款方式：</span>
						<span>{{allData.guaranteeSlipPayment.paymentMethod}}</span>
					</li>
					<li>
						<span>账号：</span>
						<span>{{allData.guaranteeSlipPayment.account}}</span>
					</li>
					<li>
						<span>户名：</span>
						<span>{{allData.guaranteeSlipPayment.accountName}}</span>
					</li>
					<li>
						<span>开户行：</span>
						<span>{{allData.guaranteeSlipPayment.openingBank}}</span>
					</li>
					<li>
						<span>银行：</span>
						<span>{{allData.guaranteeSlipPayment.bankName}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="d-cards" id='d-cards' v-if='allData.guaranteeSlipSwingCardMessage != null'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-cards'}"></i>&nbsp;&nbsp;&nbsp;代刷卡信息</p>
			<div class="info-box">
				<p>户名：<span>{{allData.guaranteeSlipSwingCardMessage.swingCardAccountName}}</span></p>
				<ul>
					<li>
						<span>账号：</span>
						<span>{{allData.guaranteeSlipSwingCardMessage.swingCardAccount}}</span>
					</li>
					<li>
						<span>银行：</span>
						<span>{{allData.guaranteeSlipSwingCardMessage.swingCardBankname}}</span>
					</li>
					<li>
						<span>开户行：</span>
						<span>{{allData.guaranteeSlipSwingCardMessage.swingCardOpeningBank}}</span>
					</li>
					<li>
						<span>刷卡日期：</span>
						<span>{{allData.guaranteeSlipSwingCardMessage.swingCardDate}}</span>
					</li>
					<li>
						<span>备注：</span>
						<span>{{allData.guaranteeSlipSwingCardMessage.swingCardRemark}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="d-expand" id="d-expand"  v-if='allData.extends.length != 0'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-expand'}"></i>&nbsp;&nbsp;&nbsp;扩展信息</p>
			<div class="info-box" v-for='item in allData.extends'>
				<ul>
					<li v-for='ins in item'>
						<span>{{ins.extendName}}</span>
						<span>{{ins.extendValue}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="d-remark" id='d-remark'  v-if='allData.guaranteeSlipRemark.length != 0'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-remark'}"></i>&nbsp;&nbsp;&nbsp;备注信息</p>
			<div class="info-box">
				<p>备注：</p>
				<textarea class="setText" rows="4" readonly  v-model='remark'>
				</textarea>
			</div>
		</div>
		<div class="d-log" id='d-log' v-if='allData.logs.length != 0'>
			<p><i class="iconfont icon-baoxianchanpin" v-bind:class="{'now':clickId == 'd-log'}"></i>&nbsp;&nbsp;&nbsp;日志信息</p>
			<div class="info-box">
				<ul>
					<li v-for='item in allData.logs'>{{item.creatorUser}} {{item.creationTime}} {{item.operationDetail}} </li>
					<!-- <li>ehtwo 2018-01-03 12:23:00 将被保人'李楚华'改为'赵春华'</li>
					<li>ehtwo 2018-01-03 12:23:00 将保单给业务员'张十三'结算完成</li>
					<li>已完成</li> -->
				</ul>
			</div>
		</div>
	</div>
	<div class="d-mark clearfix">
		<div class="markbox" v-bind:class="{'largeOne':!timer,'smallOne':timer}">
			<ul>
				<li  v-if='allData.guaranteeSlipBaseBase != null' @click="getNow('d-info')" 
				v-bind:class="{'active':clickId == 'd-info'}">
				<a href="" @click.prevent="custormAnchor('d-info')">保单信息</a>
				</li>
				<li  v-if='allData.guaranteeSlipVehicle != null' @click="getNow('d-carInfo')" 
				v-bind:class="{'active':clickId == 'd-carInfo'}">
				<a href="" @click.prevent="custormAnchor('d-carInfo')">车辆信息</a>
				</li>
				<li v-if='allData.details.length != 0' @click="getNow('d-party')" 
				v-bind:class="{'active':clickId == 'd-party'}">
				<a href="" @click.prevent="custormAnchor('d-party')">保单关系人</a>
				</li>
				<li  v-if='allData.guaranteeSlipCharge != null' @click="getNow('d-detail')"
				 v-bind:class="{'active':clickId == 'd-detail'}">
				<a href="" @click.prevent="custormAnchor('d-detail')">保单明细</a>
				</li>
				<li v-if='allData.guaranteeSlipCharge != null' @click="getNow('d-fee')"
				 v-bind:class="{'active':clickId == 'd-fee'}">
				<a href="" @click.prevent="custormAnchor('d-fee')">手续费信息</a>
				</li>
				<li @click="getNow('d-account')" v-bind:class="{'active':clickId == 'd-account'}">
				<a href="" @click.prevent="custormAnchor('d-account')">结算信息</a></li>
				<li v-if='allData.policys.length != 0' @click="getNow('d-match')" 
				v-bind:class="{'active':clickId == 'd-match'}">
				<a href="" @click.prevent="custormAnchor('d-match')">匹配政策</a>
				</li>
				<li v-if='allData.guaranteeSlipPayment != null' @click="getNow('d-pay')" 
				v-bind:class="{'active':clickId == 'd-pay'}">
				<a href="" @click.prevent="custormAnchor('d-pay')">付款信息</a>
				</li>
				<li  v-if='allData.guaranteeSlipSwingCardMessage != null' @click="getNow('d-cards')"
				 v-bind:class="{'active':clickId == 'd-cards'}">
				<a href="" @click.prevent="custormAnchor('d-cards')">代刷卡信息</a>
				</li>
				<li v-if='allData.extends.length != 0' @click="getNow('d-expand')" 
				v-bind:class="{'active':clickId == 'd-expand'}">
				<a href="" @click.prevent="custormAnchor('d-expand')">扩展信息</a>
				</li>
				<li v-if='allData.guaranteeSlipRemark.length != 0'  @click="getNow('d-remark')"
				 v-bind:class="{'active':clickId == 'd-remark'}">
				<a href="" @click.prevent="custormAnchor('d-remark')">备注信息</a>
				</li>
				<li v-if='allData.logs.length != 0' @click="getNow('d-log')"
				 v-bind:class="{'active':clickId == 'd-log'}">
				<a href="" @click.prevent="custormAnchor('d-log')">日志信息</a>
				</li>
			</ul>
		</div>
	</div>
  </div>
</div>
</template>

<script>
export default {
	data(){
		return{
			clickId:'d-info', //点击的id
			dataId:'', //保单id，传参得到
			allData:{}, //详情信息
			dialogFormVisible:false, //弹框
			formLabel:{
				mutualInsurance:'',
				name:null,
				remark:'',
				remarkType:'1'
			},
			mutualInsurances:[],  //交商同保数据
			names:[],  //业务员数据
			remark:'',
			fullWidth: document.documentElement.clientWidth,
			timer:true
		}
	},
	mounted(){
		if(this.$route.params.id){
			this.dataId = this.$route.params.id;
			this.getDetail();
		}
		const that = this
	      window.onresize = () => {
	        return (() => {
	          window.fullWidth = document.documentElement.clientWidth
	          that.fullWidth = window.fullWidth
	        })()
	      }
	},
	 watch: {
      fullWidth (val) {
      	const that = this;
        if(!this.timer) {
          this.fullWidth = val
          console.warn(this.fullWidth)
          if(val >= '1158px'){
	            that.timer = false
          }else{
	            that.timer = true
          }
        }
      }
    },
	methods:{
		// 右侧定位样式
		getNow(id){
			if(id == 'd-info'){
				this.clickId = 'd-info'
			}else if(id == 'd-carInfo'){
				this.clickId = 'd-carInfo'
			}else if(id == 'd-party'){
				this.clickId = 'd-party'
			}else if(id == 'd-detail'){
				this.clickId = 'd-detail'
			}else if(id == 'd-fee'){
				this.clickId = 'd-fee'
			}else if(id == 'd-account'){
				this.clickId = 'd-account'
			}else if(id == 'd-match'){
				this.clickId = 'd-match'
			}else if(id == 'd-pay'){
				this.clickId = 'd-pay'
			}else if(id == 'd-cards'){
				this.clickId = 'd-cards'
			}else if(id == 'd-expand'){
				this.clickId = 'd-expand'
			}else if(id == 'd-remark'){
				this.clickId = 'd-remark'
			}else if(id == 'd-log'){
				this.clickId = 'd-log'
			}
		},
		//右侧定位
		custormAnchor(val){
        	// 找到锚点
	        let anchorElement = document.getElementById(val);
	        // 如果对应id的锚点存在，就跳转到锚点
	        if(anchorElement) { anchorElement.scrollIntoView(); }
		},
		//详情
		getDetail(){
			let params = {
				id:this.dataId
			}
			this.post(params,'services/app/guaranteeSlip/GuaranteeSlipDetail').then(rs => {
				if(rs.success){
					console.log(rs.result);
					this.allData = rs.result;
					//this.remark = this.allData.guaranteeSlipRemark
					this.allData.guaranteeSlipRemark.forEach(item => {
						this.remark += item.remark+'  '+item.creationTime + '\n';
					})
				}
			})
		},
		//编辑
		toEdit(){
			this.dialogFormVisible = true;
			this.getD();
			this.getUsers();
		},
		//交商同保
		getD(){
			let params = {
				id: 4
			};
			this.post(params,'services/app/common/GetDictionaries').then(rs => {
				if(rs.success){
					// console.log(rs.result);
					this.mutualInsurances = rs.result.items;
				}
			})
		},
		//业务员
		getUsers(){
			let params = {};
			this.post(params,'services/app/common/GetUsers').then(rs => {
				if(rs.success){
					// console.log(rs.result);
					this.names = rs.result.users;
				}
			})
		},
		//更新
		toUpdate(val){
			this.dialogFormVisible = false;
			let params = {
				id: this.dataId,
				userId : this.formLabel.name,
				insuranceType : this.formLabel.mutualInsurance,
				remark:this.formLabel.remark,
				remarkType:this.formLabel.remarkType
			}
			console.log(params);
			this.post(params,'services/app/guaranteeSlip/UpdateGuaranteeSlip').then(rs => {
				if(rs.success){
					// console.log(rs.result);
					// console.log('--------------------------');
					this.getDetail();
					this.$refs[val].resetFields();
					this.formLabel.name=null;
					this.formLabel.mutualInsurance = '';
					this.formLabel.remark = '';
					this.formLabel.remarkType = '1';
				}
			})
		}
	}
}	

</script>

<style lang='scss' scoped>
.setStyle{
	margin-left:40px;
}
.setCenter{
	text-align: center
}
.app-container{
	display:table;
.detail-container{
	height:100%;
	position:relative;
	width:1300px;
	.d-content{
		width:1000px;
		//display:inline-block;
		float: left;
		padding:20px;
		color:#333333;
		.d-info,.d-carInfo,.d-party,.d-detail,.d-fee,.d-match,.d-pay,.d-cards,.d-remark{
			.now{
				color:#ee6000;
			}
			ul{
				padding-left:0
			}
			p{
				font-size:18px;
				padding:0 0 0 20px;
				.btn{
					margin-left:10px;
				}
			}
			.firstp{
				font-size:18px;
				padding:0 0 0 20px;
			}
			.info-box{
				background-color:#f6f6f6;
				border-radius:5px;
				padding:20px;
				P{
					margin-bottom: 0;
					margin-top:10px;
					border-bottom:1px solid #ecebeb;
					font-size:16px;
					font-weight:600;
					padding:0 0 10px 0;
					span:nth-of-type(1){
						color:#0f62c2;
						font-weight:600;
						font-size:16px;
					}
					span:nth-of-type(2){
						background-color:#39b96c;
						color:#fff;
						padding:3px;
						font-size:10px;
						font-weight:400;
						border-radius:5px;
					}
				}
				ul{
					margin-top:0;
					li{
						display:inline-block;
						width:330px;
						font-size:12px;
						padding:15px 0 0 0;
						span:nth-of-type(1){
							width:100px;
							display:inline-block;
							color:#666666;
						}
						span:nth-of-type(2){
							color:#333333;
						}
					}
					li:nth-child(3n){
						width:230px;
						display:inline-block;
					}
				}
			}
		}
		.d-info{
			.info-box{
				ul{
					li{
						width:100% !important;
						font-size:12px;
						.lf,.md,.rh{
							width:33%;
							float:left;
							span:first-child{
								display:inline-block;
							}
							span:last-child{
								width:160px;
								display:inline-block;
								color:#333333;
							}
						}
						.rh{
							.sp{
								vertical-align: top;
							}
						}
					}
				}
			}
		}
		.d-carInfo{
			.info-box{
				p{
					span{
						color:#fff !important;
						font-size:12px !important;
	                    text-align:center;
	                    display:inline-block;
	                    background-color:#0f62c2;
	                    box-shadow: 0 0 3px #fff inset;
	                    padding:6px 15px;
	                    border-radius:5px;
	                    border:1px solid rgba(15,98,194,0.50);
	                    font-size:13px;
					}
				}
			}
		}
		.d-party{
			.info-box{
				margin-bottom:10px;
				p{
					i{
						color:#0cb4f7;
					}
					span{
						color:#000 !important;
					}
				}
			}
		}
		.d-detail,.d-fee{
			.info-box{
				p{
					border:none;
				}
			}
			.util-table{
				margin-top:0;
				width:100%;
				border:none;
				.util-tb{
					width:100%;
					border-collapse: collapse;
					border:none;
					tr{
						th{
							background-color:#c1e9f9;
						}
						th:first-child{
							border-top-left-radius: 5px;
							border-bottom-left-radius: 5px;
						}
						th:last-child{
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;
						}
					}
				}
			}
		}
		.d-account,.d-expand{
			.now{
				color:#ee6000;
			}
			p{
				font-size:18px;
				padding:0 0 0 20px;
			}
			ul{
				padding-left:0;
			}
			.info-box{
				background-color:#f9f9f9;
				border-radius:5px;
				padding:20px;
				list-style: none;	
				ul{
					background-color:#fff;
					border:1px solid #efefef;
					border-radius:5px;
					li{
						border:1px solid #efefef;
						margin: -1px 0 0 -1px;
						width:458px;
						padding:15px;
						display:inline-block;
						span:first-child{
							display:inline-block;
							width:300px;
						}
						span:last-child{
							color:#0769e6;
						}
					}
				}
			}
		}
		.d-match{
			.info-box{
				margin-bottom:10px;
				p{
					span:nth-of-type(1){
						color:#000;
					}
				}
			}
		}
		.d-pay,.d-cards{
			.info-box{
				p{
					span:nth-of-type(1){
						color:#5ac5e6;
					}
				}
			}
		}
		.d-remark{
			.info-box{
				p{
					font-size: 13px;
					color:#666666;
					border-bottom: none;
					span:nth-of-type(1){
						color:#5ac5e6;
						font-size:13px;
					}
				}
				.setText{
					width:100%;
					border-color:#d8d8d8;
				}
				textarea{
					line-height: 20px;
				}
			}
		}
		.d-log{
			.now{
				color:#ee6000;
			}
			ul{
				padding-left:0
			}
			p{
				font-size:18px;
				padding:0 0 0 20px;
			}
			.info-box{
				background-color:#f9f9f9;
				border-radius:5px;
				padding:20px;
				ul{
					padding:0 0 0 10px;
					margin:0 0 0 10px;
					//border-left:1px solid #d8d8d8;
					//list-style-type:circle;
					li{
						//list-style-position:inside;
						display: block;
						padding:2px 0;
						color:#949292
					}
					li:last-child{
						color:#333;
					}
					li:not(:last-child):before{
						content:'';
						border-left:1px solid #d8d8d8;
						position:relative;
						top:14px;
						left:-12px;
					}
					li:after{
						content:'';
						display:block;
						height:8px;
						width:8px;
						border:1px solid #58b4f3;
						border-radius:50%;
						background-color:#fff;
						position:relative;
						top:-10px;
						left:-15px;
					}
					li:last-child:after{
						content:'';
						display:block;
						height:10px;
						width:10px;
						border:1px solid #0098ff;
						border-radius:50%;
						background-color:#fff;
						position:relative;
						top:-11px;
						left:-16px;
					}
				}
			}
		}
	}
	.d-mark{
		position:relative;
		//display:inline-block;
		min-height:600px;
		width:125px;
		float:left;
		.largeOne{
				position: fixed;
				left: 83%;
				top:25%;
				width:125px;
			}
			.smallOne{
				position: fixed;
				left: 1250px;
				top:25%;
				width:125px;
			}
		.markbox{
			ul{
				padding-left:0;
				list-style-type:none;
				li{
					padding:10px 0 10px 40px;
					color:#aeaeae;
					font-size:13px;
					cursor: pointer;
					z-index:1;
					position:relative;
					overflow: hidden;
                	text-overflow:ellipsis;
                	white-space: nowrap;
					background:url('../../assets/images/item2.png') no-repeat 0px 8px;
				}
				li:not(.active):hover{
					color:#f6af7f;
					background:url('../../assets/images/item3.png') no-repeat 0px 8px;
				}
				.active{
					color:#ee6000 !important;
					background:url('../../assets/images/item1.png') no-repeat 0px 8px !important;
				}
			}
			ul:after{
				content:'';
				height:100%;
				background-color: #cbcbcb;
				position:absolute;
				top:1px;
				left:11px;
				z-index: 0;
				width:1px;
			}
		}
	}
}
}

</style>